<template>
    <div class="app">
        <div class="content">
            <div class="left">
                <div class="top">
                  <p class="title">居民学历占比</p>
                  <!-- 饼状图 -->
                  <PIE/>
                </div>
                <div class="buttom">
                  <p class="title">居民学历占比</p>
                  <!-- 雷达图 -->
                  <RADAR/>
                </div>
            </div>
            <div class="right">
                <p class="title">教育风采展示</p>
                <div class="tabs">
                    <a-tabs type="card" @change="callback">
                        <a-tab-pane key="1" tab="社区书吧">
                            <div class="imgs">
                              <img src="../../assets/imgs/pc1143-720.png" alt="">
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="2" tab="线下培训">
                            <div class="imgs">
                              <img src="../../assets/imgs/pc1143-720.png" alt="">
                            </div>
                        </a-tab-pane>
                        <a-tab-pane key="3" tab="平安课程">
                            <div class="imgs">
                              <img src="../../assets/imgs/pc1143-720.png" alt="">
                            </div>
                        </a-tab-pane>
                    </a-tabs>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import PIE from './echarts/pie.vue'
import RADAR from './echarts/radar.vue'
export default {
  components:{
    PIE,
    RADAR
  },
  data() {
    return {};
  },
  methods: {
    callback(key) {
      console.log(key);
    },
  },
}
</script>
<style lang="less" scoped>
.content{
    display: flex;
}
.title{
    font-size: 20px;
    margin-top: 24px;
    margin-left: 24px;
    margin-bottom: 16px;
    color: #333333;
    font-weight: bold;
}
.left{
    width: 572px;
    height: 859px;
    box-sizing: content-box;
    background-color: #fff;
    border-radius: 2px;
    margin-right: 24px;
    border: 1px solid #EBEBEB;
    .top{
        height: 405px;
        width: 572px;
    }
    .buttom{
        height: 405px;
        width: 572px;
    }
}
.right{
    width: 992px;
    height: 859px;
    background: #FFFFFF;
    border-radius: 2px;
    border: 1px solid #EBEBEB;
    .tabs{
        margin-left: 12px;
        .imgs{
            margin-left: 12px;
            width: 1144px;
            height: 721px; 
            img{
                width: 100%;
                height: 100%;
            }
        }
        :deep(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab) {
            color: #999999;
            border: 1px solid #fff;
            font-size: 16px;
        }
        :deep(.ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active) {
            color: #3183FF;
            font-size: 16px;
        }
    }
}
</style>